{%extends 'base.html'%}
{%block content%}


  <div class="container content">
    <div class="row">
      <div class="col-md-6">
        {% if images %}
          <h3 class="mt-3">Found {{images|length}}  of searched term  {{message}}</h3>
        {% else %}
          <h3>0 Images with the searched term {{message}}</h3>
        {% endif %}
      </div>
      </div>
      <div class="row">
        {% if images %}
            {% for image in images %}
            <div class="col-md-4">
              <div class="card mt-5">
                <div class="card-body">
                  <img src="{{image.image.url}}" class="img-responsive w-100 btn btn-outline-info" alt="Search Term">
                  <h2>{{image.title}}</h2>
                  <p>{{image.description}}</p>
                  <p class="mt-3">Taken at ~ {{image.location}}</p>
                  <p> Category ~ {{image.category}}</p>
                  <p>Posted on {{image.posted_date}}</p>
                </div>
              <input type="text" id="imagelink" class="form-control input-sm" value="https://picasagalla.herokuapp.com{{image.image.url}}" class="hidden"> 
                <button class="btn btn btn-outline-info" onclick="CopyFunction()"> 
             <i class="fa fa-copy" style="color: #D6962C"></i> Download image
                </button>
              </div>
            </div>
          {% endfor %}
        {% endif %}
      </div>
      </div>
      
{% endblock %}
